/**
 * 验证页面
 * wangmei
 */
import React, { Component } from 'react';
import { Tabs, Row, Table, Card, Col, Button, message, Spin  } from 'antd';
import * as Request from '../../../Server/Upgrade';
import ValidatorTable from './ValidatorTable';
import qs from 'qs';
import {REQUEST_SUCCESS,REQUEST_UNAUTHORIZED} from '../../../common/const';
require('./sysinfo.css');

const TabPane = Tabs.TabPane;

class SysinfoValidator extends Component{
    constructor(props) {
        super(props);
        this.state = {
            totalData: {},
            loading: false,
            modalShow: false,
            modalData: [],
            type: '',
            text: '' 
        };
    }

    componentWillMount() {
        this.getData();
    }

    getData = () =>{
        const { params } = this.props.match;
        const paramId = params.id.split('&');
        const param = {
            verType: paramId[0],
            version: paramId[1]
        }
        const _params = qs.stringify(param);
        this.setState({
            loading: true
        })
        Request.logStatusGetValidator(_params).then(res=>{
            this.setState({
                loading: false
            })
            if(res && res.code == REQUEST_SUCCESS){
                this.setState({
                    totalData: res.data
                })
            }else{
                res.code !== REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        });
    }

    renderItemCard = (row, item) =>{
        return(
            <Card style={{ width: '100%', marginTop: 15 }} key={item.title}>
                <Row>
                    <text className="card-text">{item.title}</text>
                </Row>
                <Row>
                    <Col span={7} offset={1}>
                        <div className="label-text">成功</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.SUCCESS?row.SUCCESS:[], true, item, '成功')}>{row.SUCCESS?row.SUCCESS.length:0}</div>
                    </Col>
                    <Col span={7} offset={1}>
                        <div className="label-text">警告</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.WARN?row.WARN:[], true, item, '警告')}>{row.WARN?row.WARN.length:0}</div>
                    </Col>
                    {item.value=='settingComm'&&<Col span={7} offset={1}>
                        <div className="label-text">失败</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.ERROR?row.ERROR:[], true, item, '失败')}>{row.ERROR?row.ERROR.length:0}</div>
                    </Col>}
                </Row>
            </Card>
        )
    }

    renderVersionItem = (row, item) =>{
        return(
            <Card style={{ width: '100%', marginTop: 15 }} >
                <Row>
                    <text className="card-text">{item.title}</text>
                </Row>
                <Row>
                    <Col span={5} offset={1}>
                        <div className="label-text">成功</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.SUCCESS?row.SUCCESS:[], true, item, '成功')}>{row.SUCCESS?row.SUCCESS.length:0}</div>
                    </Col>
                    <Col span={5} offset={1}>
                        <div className="label-text">警告</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.WARN?row.WARN:[], true, item, '警告')}>{row.WARN?row.WARN.length:0}</div>
                    </Col>
                    <Col span={5} offset={1}>
                        <div className="label-text">失败</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.ERROR?row.ERROR:[], true, item, '失败')}>{row.ERROR?row.ERROR.length:0}</div>
                    </Col>
                    {item.value!='actions'&&<Col span={5} offset={1}>
                        <div className="label-text">未使用</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.UNUSED?row.UNUSED:[], true, item, '未使用')}>{row.UNUSED?row.UNUSED.length:0}</div>
                    </Col>}
                    {item.value=='actions'&&<Col span={5} offset={1}>
                        <div className="label-text">未定义</div>
                        <div className="num-text" style={{ color: '#5A5A5A'}} onClick={()=>this.showTable(row.UNDEFINED?row.UNDEFINED:[], true, item, '未定义')}>{row.UNDEFINED?row.UNDEFINED.length:0}</div>
                    </Col>}
                </Row>
            </Card>
        )
    }

    showTable = (data, flag, type, text) =>{
        this.setState({
            modalData: data,
            modalShow: flag,
            type,
            text,
        })
    }

    backClick = () =>{
        this.props.history.push('/app/upgrade/sysInfo/current'+'2');
        
    }

    render(){
        const { totalData, loading, modalShow, modalData, type, text } = this.state;

        const publicSetting = [
            {
                title: '设置信息',
                value: 'settingComm'
            }, {
                title: '允许IP',
                value: 'allowIps'
            }, {
                title: '拒绝IP',
                value: 'denyIps'
            }, {
                title: '允许版本',
                value: 'allowVersions'
            }, {
                title: '拒绝版本',
                value: 'denyVersions'
            }, {
                title: '允许mac',
                value: 'allowMacs'
            }, {
                title: '拒绝mac',
                value: 'denyMacs'
            }
        ];
        const versionSetting = [
            {
                title: '收集信息',
                value: 'collectInfos'
            }, {
                title: '版本设置',
                value: 'settingItem'
            }, {
                title: '客户端信息',
                value: 'clientInfo'
            }, {
                title: '动作信息',
                value: 'actions'
            }, {
                title: '区分语言配置',
                value: 'validateLangVo'
            }
        ];

        const langData = [
            {
                title: '升级包',
                value: 'patchInfo'
            }, {
                title: '升级条件',
                value: 'patchCondition'
            }, {
                title: '泡泡',
                value: 'popupInfo'
            }, {
                title: '泡泡条件',
                value: 'popupCondition'
            }
        ]

        return(
            <div style={{height: '100%'}}>
            <Spin spinning={this.state.loading} >
                {modalShow&&<ValidatorTable 
                    showTable={this.showTable}
                    data={modalData}
                    type={type}
                    text={text}
                />}
                <Row className="info-card" >
                    <Row>
                        <Col span={2}>
                            <Button size='large' onClick={this.backClick}>
                                返回
                            </Button>
                        </Col>
                    </Row>
                    <Card style={{ width: '100%', marginTop: 15 }}>
                        <Row>
                            <text className="card-text">公共配置</text>
                        </Row>
                        <Row>
                            {publicSetting.map((item, index)=>{
                                let data = totalData[item.value];
                                if(data){
                                    return <Col span={7} offset={1} key={index}>
                                        {this.renderItemCard(data, item)}
                                    </Col>
                                } else{
                                    return ;
                                }
                            })}
                        </Row>
                    </Card>
                    <Card style={{ width: '100%', marginTop: 25 }}>
                        <Row>
                            <text className="card-text">版本配置</text>
                        </Row>
                        <Row>
                            {versionSetting.map((item, index)=>{
                                let data = totalData[item.value];
                                if(data){
                                    if(item.value=='validateLangVo'){
                                        let tempArray = [];
                                        Object.keys(data).forEach(function(key){
                                            let obj = {
                                                title: key,
                                                value: data[key]
                                            }
                                            tempArray.push(obj);
                                        });
                                        tempArray.reverse();
                                        return(
                                            <Col span={24} style={{width: '100%', marginTop: 15}}>
                                                <Row>
                                                    <text className="card-text">{item.title}</text>
                                                </Row>
                                                <Tabs>
                                                    {tempArray.map((tabItem, tabIndex)=>{
                                                        return(
                                                            <TabPane tab={tabItem.title} key={tabIndex}>
                                                                {langData.map((langItem, langIndex)=>{
                                                                    let value = tabItem.value[langItem.value];
                                                                    return <Col span={11} offset={1} key={index}>
                                                                        {this.renderVersionItem(value,langItem)}
                                                                    </Col>
                                                                })}
                                                            </TabPane>
                                                        )
                                                    })}
                                                </Tabs>
                                            </Col>
                                        )
                                    }
                                    return <Col span={11} offset={1} key={index}>
                                        {this.renderVersionItem(data, item)}
                                    </Col>
                                }else{
                                    return ;
                                }
                            })}
                        </Row>
                    </Card>
                </Row>
                </Spin>
            </div>
        )
    }
}

export default SysinfoValidator